<template>
  <el-form label-position="top" :model="formdata" class="widget-container">
    <el-form-item :label="`${$t('尺寸')}(px)`" class="size-input">
      <div class="line">
        {{ $t('宽') }}
        <el-input-number v-model="formdata.w" controls-position="right" style="width: 86px" />
      </div>
      <div class="line">
        {{ $t('高') }}
        <el-input-number v-model="formdata.h" controls-position="right" style="width: 86px" />
      </div>
    </el-form-item>
    <el-form-item :label="`${$t('位置')}(px)`" class="size-input">
      <div class="line">
        X
        <el-input-number v-model="formdata.x" controls-position="right" style="width: 86px" />
      </div>
      <div class="line">
        Y
        <el-input-number v-model="formdata.y" controls-position="right" style="width: 86px" />
      </div>
    </el-form-item>
    <h4 class="title">{{ $t('内容') }}</h4>
    <el-form-item label="">
      <el-input v-model="formdata.v" type="textarea" :rows="4" @blur="changeContent" />
    </el-form-item>
    <div v-if="formdata.t == 'text'">
      <h4 class="title">{{ $t('文字属性') }}</h4>
      <el-form-item :label="$t('字体大小')" class="size-input">
        <el-select v-model="formdata.fn" :placeholder="$t('请选择字体')">
          <el-option v-for="item in fonts" :key="item.value" :style="`font-family:${item.value}`" :label="item.label"
            :value="item.value" />
        </el-select>
        <el-input-number v-model="formdata.h" controls-position="right" style="width: 86px; margin-left: 8px" />
      </el-form-item>

      <el-form-item :label="$t('颜色对齐方式')" class="size-input">
        <el-color-picker v-model="formdata.c" />
        <div class="layerBtn fontBtn">
          <i @click="changeFont('left')" class="iconfont icon-a-zuoduiqibeifen3"></i>
          <i @click="changeFont('center')" class="iconfont icon-juzhongduiqi"></i>
          <i @click="changeFont('right')" class="iconfont icon-a-youduiqibeifen2"></i>
        </div>
      </el-form-item>
    </div>
    <h4 class="title">{{ $t('层级') }}</h4>
    <div class="layerBtn">
      <i class="el-icon-upload2" @click="changeLayer('top')" />
      <i class="el-icon-top" @click="changeLayer('add')" />
      <i class="el-icon-bottom" @click="changeLayer('sub')" />
      <i class="el-icon-download" @click="changeLayer('bottom')" />
    </div>
    <div v-if="formdata.t == 'image'">
      <h4 class="title">{{ $t('图片') }}</h4>
      <el-form-item label="">
        <el-upload :headers="myHeaders" :action="$store.getters.updateURL + 'material/upload'" :on-success="handleSuccess"
          :show-file-list="false">
          <el-button plain class="upload-btn">{{ $t('点击上传') }}</el-button>
        </el-upload>
      </el-form-item>
    </div>

    <h4 class="title">{{ $t('名称') }}</h4>
    <el-form-item label="">
      <el-input v-model="formdata.name" />
    </el-form-item>
    <h4 class="title">{{ $t('备注') }}</h4>
    <el-form-item label="">
      <el-input v-model="formdata.rm" />
    </el-form-item>
    <h4 class="title">{{ $t('旋转') }}</h4>
    <el-form-item label="" class="size-input">
      <div style="width: calc(100% - 94px)">
        <el-slider v-model="formdata.rotate" :min="0" :max="360" />
      </div>
      <el-input-number v-model="formdata.rotate" style="width: 86px" controls-position="right" />
    </el-form-item>
    <div v-if="formdata.t == 'text'">
      <h4 class="title">{{ $t('背景色') }}</h4>
      <el-form-item label="">
        <el-color-picker v-model="formdata.bgColor" />
      </el-form-item>
    </div>
    <!-- 暂时不支持颜色修改 -->
    <!-- <el-form-item v-if="formdata.t == 'qrcode'" label="颜色">
      <el-color-picker
        v-model="formdata.c"
        @change="changeColor"
      />
    </el-form-item>
    <el-form-item v-if="formdata.t == 'qrcode'" label="背景色">
      <el-color-picker
        v-model="formdata.bgc"
        @change="changeColor"
      />
    </el-form-item> -->
  </el-form>
</template>

<script>
import '@/assets/fonts/ali-font.css'

export default {
  name: 'Widget',
  props: ['formdata', 'index'],
  data() {
    return {
      myHeaders: { Authorization: `Bearer ${this.$store.getters.token}` },
      fonts: [
        {
          label: '阿里巴巴普惠体-Light',
          value: 'ali-light'
        },
        {
          label: '阿里巴巴普惠体-Regular',
          value: 'ali-Regular'
        },
        {
          label: '阿里巴巴普惠体-Medium',
          value: 'ali-Medium'
        },
        {
          label: '阿里巴巴普惠体-Bold',
          value: 'ali-Bold'
        },
        {
          label: '阿里巴巴普惠体-Heavy',
          value: 'ali-Heavy'
        }
      ]
    }
  },
  created() { },
  methods: {
    changeColor() {
      this.$emit('changeColor')
    },
    // 上传成功
    handleSuccess(res, file) {
      this.formdata.v = res.data.url
    },
    changeContent() {
      if (this.formdata.t === 'qrcode') {
        this.$emit('changeQrcode', {
          index: this.index,
          item: this.formdata
        })
      }
    },
    changeLayer(type) {
      this.$emit('changeLayer', {
        index: this.index,
        type: type
      })
    },
    changeFont(type) {
      this.$emit('changeFont', {
        index: this.index,
        type: type
      })
    }
  }
}
</script>

<style scoped lang="scss">
h4.title {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #1d2129;
  line-height: 22px;
  margin-bottom: 8px;
}

.el-form--label-top .size-input ::v-deep {

  .el-form-item__label,
  .line {
    color: #86909c;
  }

  .el-form-item__content::before,
  .el-form-item__content::after {
    display: none;
  }

  .el-form-item__content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-input-number.is-controls-right .el-input__inner {
      padding: 0 20px 0 5px;
    }

    .el-input-number__decrease,
    .el-input-number__increase {
      width: 18px;
      background-color: #fff;
      border: none;

      .el-icon-arrow-up,
      .el-icon-arrow-down {
        font-weight: bold;
      }
    }
  }
}

.widget-container {
  padding: 0 16px;

  .free-poster-tools .el-input__inner {
    padding: 0;
  }
}

.layerBtn {
  display: block;
  width: 100%;
  padding: 4px;
  border-radius: 8px;
  background: #f6f7f9;
  margin-bottom: 8px;
}

.layerBtn i {
  font-size: 20px;
  line-height: 30px;
  display: inline-block;
  width: 25%;
  text-align: center;
  cursor: pointer;
}

.layerBtn.fontBtn {
  margin-left: 8px;
  margin-bottom: 0;

  i {
    width: 33%;
    font-size: 12px;
    font-style: normal;
  }
}

.layerBtn i.active {
  color: var(--huocms-com-color-primary);
}

.layerBtn i:hover {
  color: var(--huocms-com-color-primary);
}

.layerBtn i.disabled {
  color: #ccc;
}

::v-deep {
  .el-upload {
    width: 100%;

    .upload-btn {
      width: 100%;
      background-color: #f2f3f5;
      border-color: transparent;
    }
  }
}
</style>
